<template>
  <div  id="BenefitsAll" class="overFlow_routerBox_36ECt">
    <div  class="pointsPage">
        <h1 style="text-align: left;" class="rewardPoints_pc_titleTxt_2_JEj">
            <font style="vertical-align: inherit;">
              <font style="vertical-align: inherit; ">   {{ $t("profile.PointsBalance") }}</font>
            </font>
        </h1>
          <header class="rewardPoints_pc_titleBox_1Ounu">
            <span class="rewardPoints_pc_titleBox__item_2Yx6t " :class="{'rewardPoints_pc_titleBox__item--active': 1 === num}" @click="btnChange(1)">
              <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">   {{ $t("profile.RewardPoints") }}</font>
              </font>
            </span>
            <span class="rewardPoints_pc_titleBox__item_2Yx6t" :class="{'rewardPoints_pc_titleBox__item--active': 2 === num}" @click="btnChange(2)">
              <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">   {{ $t("profile.EarnPoints") }}</font>
              </font>
            </span>
            <span class="rewardPoints_pc_titleBox__item_2Yx6t" :class="{'rewardPoints_pc_titleBox__item--active': 3 === num}" @click="btnChange(3)">
              <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">   {{ $t("profile.PointsHistory") }}</font>
              </font>
            </span>
          </header>
          <main v-show="1 === num">
            <div>
              <div style="text-align: left;" class="list-item-content">
                <p class="item-current" >
                  <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">   {{ $t("profile.Yourcurrentbalanceis") }}</font>
                  </font>
                  <span style="color: red;">
                      <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;"> 0</font>
                      </font>
                  </span>
                  <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">   {{ $t("profile.rewardpoints") }}</font>
                  </font>
                </p>
                <p class="item-content-title">
                  <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">   {{ $t("profile.Mottwebsiteexchange") }}</font>
                  </font>
                </p>
                <p class="item-content-title">
                  <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">   {{ $t("profile.Current") }}</font>
                  </font>
                </p>
              <div class="item-content-text">
                  <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">   {{ $t("profile.Each") }}</font>
                  </font>
                  <a class="item-content-title" style="cursor: pointer;">
                    <font style="vertical-align: inherit;">
                      <font @click="balanceChange" style="vertical-align: inherit;">   {{ $t("profile.learnmore") }}...</font>
                    </font>
                </a>
              </div>
              <p class="item-content-title">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">   {{ $t("profile.Balancelimitations") }}</font>
                </font>
              </p>
            <div class="item-content-text">
                    <font style="vertical-align: inherit;">
                      <font style="vertical-align: inherit;">   {{ $t("profile.MinimumBalance") }}</font>
                    </font>
                  </div>
                <p class="item-content-title">
                  <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">   {{ $t("profile.earnedreward") }}</font>
                  </font>
                </p>
              </div>
            </div>
          </main>

          <main v-show="2 === num">
              <div ><div  v-html="$t('balance.text24')"></div></div>
          </main>

          <main v-show="3 === num"> 
            <div class="listBox">
                <div class="el-row" style="margin-left: -10px; margin-right: -10px;">
                  <div class="el-col el-col-4" style="padding-left: 10px; padding-right: 10px;">
                    <div class="grid-content bg-purple">{{ $t("profile.Points") }}</div>
                </div>
                <div class="el-col el-col-12" style="padding-left: 10px; padding-right: 10px;">
                  <div class="grid-content bg-purple">{{ $t("profile.Reason") }}</div>
                  </div>
                  <div class="el-col el-col-4" style="padding-left: 10px; padding-right: 10px;">
                    <div class="grid-content bg-purple">{{ $t("profile.Date") }}</div>
                  </div>
                  <div class="el-col el-col-4" style="padding-left: 10px; padding-right: 10px;">
                    <div class="grid-content bg-purple">{{ $t("profile.Total") }}</div>
                  </div>
                </div>
            </div>
          </main>
    </div>
  </div>
</template>

<script>
export default {
  name:'rewardPoints',
  data(){
    return {
      num:1
    }
  },
  methods:{
    balanceChange(){
      this.$router.push('/balance')
    },
    btnChange(num1){
      this.num = num1
    }
  }
}
</script>

<style lang = 'scss'>

#BenefitsAll{
  margin-left: 20px;
    .overFlow_routerBox_36ECt {
    flex: 1;
    margin-left: 20px;
}
.pointsPage {
    background: #fff;
    padding-bottom: 20px;
}
.rewardPoints_pc_titleTxt_2_JEj {
    font-size: 20px;
    padding: 0 40px;
    border-bottom: 1px solid #efefef;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0;
    color: #575655;
    line-height: 60px;

}
.rewardPoints_pc_titleBox_1Ounu {
    display: flex;
    margin-top: 20px;
    text-align: center;
    padding: 0 40px;
    justify-content: space-around;
}
.rewardPoints_pc_titleBox__item--active {
    border-color: #ff5900!important;
    color: #000;
}
.rewardPoints_pc_titleBox__item_2Yx6t {
    width: 220px;
    height: 45px;
    font-size: 20px;
    color: #575655;
    line-height: 45px;
    cursor: pointer;
    border: 1px solid #fff;
    user-select: none;
    border-radius: 6px;
}
.rewardPoints_pc_titleBox__item--active_H8562 {
    border-color: #ff5900!important;
    color: #000;
}

.rewardPoints_pc_titleBox__item_2Yx6t {
    width: 220px;
    height: 45px;
    font-size: 20px;
    color: #575655;
    line-height: 45px;
    cursor: pointer;
    border: 1px solid #fff;
    user-select: none;
    border-radius: 6px;
}
.list-item-content {
    font-size: 16px;
    padding: 20px 100px;
}
.list-item-content .item-current {
    color: #ffaf52;
    line-height: 30px;
}
.list-item-content .item-content-title {
    color: #ff5900;
    line-height: 30px;
}
.pointsPage .listBox {
    height: 42px;
    margin-top: 20px;
    line-height: 42px;
    background: #ffaf52;
    text-align: center;
    color: #fff;
    font-size: 18px;
}
.earn-content{
  font-size: 14px;
    padding: 0 100px;
}
.earn-content .item-content-earn-title {
    font-size: 18px;
    font-weight: 700;
    color: #ff5900;
    margin-top: 20px;
    line-height: 26px;
}
.earn-content .item-content-earn-text {
    line-height: 26px;
}
.active-text {
    color: #ff5900;
}
}

</style>